<template>
	<!-- m -->
	<view class="moreContent">
		<view
			class="moreList u-m-b-20 u-p-20"
			v-for="(item, index) in myData"
			:key="index"
			@click="handleDetail(item)">
			<image class="imgs" :src="item.image" mode="aspectFill"></image>
			<view class="moreRight">
				<text class="name">{{ item.name }}</text>
				<text class="hite">{{ item.desc }}</text>
			</view>
		</view>
	</view>
</template>

<script>
/**
 *shoproGoodsCard - 单个名师卡片
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
	components: {},
	data() {
		return {
		};
	},
	computed: {
	},
	props: {
		myData: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	methods: {
		//点击商品
		handleDetail(item) {
			this.$emit('handleDetail',item);
		},
	}
};
</script>

<style lang="scss">
//名师
.moreContent {
	.moreList {
		width: 100%;
		background: #ffffff;
		border-radius: 16rpx;
		display: flex;
		
		.imgs {
			width: 170rpx;
			height: 170rpx;
			border-radius: 50%;
		}
		
		.moreRight {
			width: 431rpx;
			margin-left: 28rpx;
			
			.name {
				font-family: PingFang;
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
			}
			
			.hite {
				margin-top: 20rpx;
				font-family: PingFang;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				line-height: 42rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}
</style>
